<template>
  <div class="singup">
    <Header type="signup"></Header>
    <van-form @submit="submit" class="form">
      <van-cell-group>
        <van-field
          :error="false"
          :autofocus="true"
          v-model="name"
          placeholder="姓名"
          name="name"
          :rules="[{ required: true, message: '姓名为必填项'},{
            validator:checkNameLength,message:'姓名至少两个字符'
          }]"
        />
        <van-field
          class="domain"
          label="个人空间地址"
          name="domain"
          :error="false"
          label-class="label_domain"
          v-model="domain"
          :rules="[{ required: true, message: '个人空间为必填项'},{
            validator:checkUserdomainName,message:'地址只允许字母、数字或者下划线（_）、中划线（-），至少 2 个字符，必须以字母开头，不能以特殊字符结尾'
          }]"
        />
        <van-field
          :error="false"
          v-model="phoneEmail"
          name="phoneEmail"
          placeholder="手机或邮箱"
          :rules="[{ required: true, message: '请输入手机或邮箱'},{
            validator:checkEmailOrcheckPhone,message:'手机或邮箱格式错误'
          }]"
        />
        <van-field
          v-show="isPhoneEmail"
          v-model="vCode"
          type="text"
          name="vCode"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendVcode">
              <CountDown ref="countdown" />
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model="password"
          :type="inputType"
          name="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' },{validator:checkPasswordLength,message:'密码长度为6-32个字符'},{validator:checkPasswordInclude,message:'密码必须包含数字，且必须包含字母或其它符号（!@_#$%^&*()-+=,.?）'}]"
        >
          <template #button>
            <van-icon
              name="eye-o"
              size="6vw"
              @click="changeInputType"
              v-show="inputType=='password'"
            />
            <van-icon
              name="closed-eye"
              @click="changeInputType"
              size="6vw"
              v-show="inputType!='password'"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">立即注册</van-button>
      </div>
      <div>
        注册即视为同意
        <a href="http://gitee.com">使用条款</a>
        及
        <a href="http://gitee.com">非活跃账号处理规范</a>
      </div>
    </van-form>
    <Footer />
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";
import CountDown from "../components/CountDown";
import { Form, Field, Button, Cell, CellGroup, Icon, Dialog } from "vant";
import { checkUserdomainName, checkPhone, checkEmail } from "@/utils/index";
export default {
  components: {
    Header,
    Footer,
    CountDown,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon
  },
  props: {},
  data() {
    return {
      name: "",
      domain: "",
      phoneEmail: "",
      vCode: "",
      password: "",
      inputType: "password"
    };
  },
  methods: {
    checkUserdomainName(val) {
      return checkUserdomainName(val);
    },
    checkNameLength(val) {
      if (val.length < 2) {
        return false;
      }
      return true;
    },
    checkEmailOrcheckPhone(val) {
      return checkPhone(val) || checkEmail(val);
    },
    sendVcode() {
      if (this.isPhoneEmail) {
        this.$refs.countdown.$emit("start");
      }
    },
    changeInputType() {
      if (this.inputType == "password") {
        this.inputType = "text";
      } else {
        this.inputType = "password";
      }
    },
    checkPasswordLength(val) {
      if (val.length < 6 || val.length > 32) {
        return false;
      }
      return true;
    },
    checkPasswordInclude(val) {
      if (
        !/[0-9]{1,}[a-zA-Z\\!\@\_\#\$\%\^\&\*\(\)\-\+\=\,\.\?]{1,}/.test(val)
      ) {
        return false;
      }
      return true;
    },
    submit(val) {
      Dialog.alert({
        title: "温馨提示",
        message: "通过了校验" + JSON.stringify(val)
      }).then(() => {});
    }
  },
  computed: {
    isPhoneEmail() {
      return checkPhone(this.phoneEmail) || checkEmail(this.phoneEmail);
    }
  },
  watch: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.singup {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  box-sizing: border-box;
  background: #f7f8fa;
}
.form {
  width: 100%;
  .label {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #8c92a4;
  }
  .loginType {
    color: #5c7b8b;
  }
}
/deep/ .label_domain {
  width: 258px;
  height: 100%;
  //   background: #f9f9f9;
  border-right: 1px solid #c7c7cc;
  text-align: left;
}
/deep/ .domain input {
  padding-left: 20px;
}
</style>
